<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.department>>>.layui-table td,
.layui-table th {
    padding: 9px 2px;
    white-space: nowrap;
}

.layui-row {
    overflow: hidden;
}

.select-item {
    width: 100%;
    text-align: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-inline {
    padding: 5px 0;
}
</style>

<template>
<div class="organization">
    <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">海运港口</li>
                <li>集装箱型</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div>
                        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加信息</a>
                    </div>
                    <form class="layui-form">
                        <div class="layui-row">
                            <div class="layui-col-lg4 select-item" style="text-align: right">

                                <div class="layui-input-inline" style="width: 300px">
                                    <input type="text" id="shrtype1" v-model="searchName" autocomplete="off" placeholder="请输入类型条件" class="layui-input key">
                                </div>
                                <button type="button" class="layui-btn sou" @click="search1">搜索</button>
                            </div>
                        </div>

                    </form>
                    <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
                        <table class="layui-table layui-form">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>国家</th>
                                    <th>创建时间</th>
                                    <th>最后修改时间</th>
                                    <td>管理员</td>
                                    <th width="100px">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="id9" v-for="(item,index) in PortList" :key="index">
                                    <td>{{item.name}}</td>
                                    <td width="150px" v-show="item.type==1">{{"国内"}}</td>
                                    <td width="150px" v-show="item.type==2">{{"海外"}}</td>
                                     <td width="150px" v-show="item.type==''"></td>
                                    <td>{{item.country}}</td>
                                    <td>{{item.createdate}}</td>
                                    <td>{{item.lastupdate}}</td>
                                    <td>{{item.operator}}</td>
                                    <td> <a href="javascript:;" @click="edit(item.guid)">修改</a> | <a href="javascript:;" @click="del(item.guid)">删除</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
                </div>
                <div class="layui-tab-item">
                    <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
                        <div>
                            <a href="javascript:;" class="layui-btn" @click="add1"><i class="layui-icon">&#xe654;</i>添加信息</a>
                        </div>
                        <form class="layui-form">
                            <div class="layui-row">
                                <div class="layui-col-lg4 select-item" style="text-align: right">
                                    <div class="layui-input-inline" style="width: 300px">
                                        <input type="text" id="shrtype" v-model="searchName" autocomplete="off" placeholder="请输入类型条件" class="layui-input key">
                                    </div>
                                    <button type="button" class="layui-btn sou" @click="search">搜索</button>
                                </div>
                            </div>

                        </form>
                        <table class="layui-table layui-form">

                            <thead>
                                <tr>
                                    <td>箱型</td>
                                    <td>普通类型</td>
                                    <td>创建时间</td>
                                    <td>最后修改时间</td>
                                    <td>管理员</td>
                                    <th width="100px">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="id9" v-for="(item,index) in BoxList" :key="index">
                                    <th width="300px">{{item.name}}</th>
                                    <th width="150px" v-if="item.type==1">{{'普通'}} </th>
                                    <th width="150px" v-if="item.type==''"></th>
                                    <th>{{item.lastupdate}}</th>
                                    <th>{{item.createdate.slice(0,10)}}</th>
                                    <th>{{item.operator}}</th>
                                    <td> <a href="javascript:;" @click="edit1(item.guid)">修改</a> | <a href="javascript:;" @click="del1(item.guid)">删除</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
                </div>
            </div>
        </div>
    </div>

</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
export default {
    name: 'WlExtras',
    components: {
        Pagination
    },
    data() {
        return {
            datacategory: [],
            currentPage: 1,
            totalPage: 0,
            name: '',
            customers: [],
            typeEmnu: [],
            type: 3,
            BoxList: [],
            searchName: '',
            PortList: []
        }
    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    mounted() {
        let that = this;
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            that.getPageData();
            that.getList();
            form.on('select', function (data) {
                that[data.elem.name] = data.elem.value;
            })
        });
        layui.use('element', function () {
            var $ = layui.jquery,
                element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        });

    },
    methods: {
        search: function () {
            this.getPageData('search');
        },
        search1: function () {
            this.getList('search');
        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();
            let postData = {};
            if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }
            postData.name = $("#shrtype").val();
            $.ajax({
                url: '/sales/Boxtype!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    that.BoxList = res.info.rows
                    that.totalPage = res.info.pageCount
                    if (that.BoxList == null || that.BoxList == undefined) {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('WlExtrasAdd');
        },
        add1: function () {
            this.$parent.switchPage('WlExtrasEAdd');
        },
        edit: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('WlExtrasWEdit');
        },
        edit1: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('WlExtrasEEdit');
        },
        del: function (id) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Port!del.action',
                    type: "post",
                    data: {
                        guid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.msg == "success") {
                            that.toast("删除成功");
                            that.getList();
                        } else {
                            that.toast('系统错误！');
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });

            })
        },
        del1(gid) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Boxtype!del.action',
                    type: "post",
                    data: {
                        guid: gid
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.msg == "success") {
                            that.toast("删除成功");
                            that.getPageData();
                        } else {
                            that.toast('系统错误！');
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });

            })
        },
        persionSize: function () {
            return '80px'
        },
        AmountSize: function () {
            return '60px'
        },
        getList: function (type = '') {
            let that = this;
            let loader = layui.layer.load();
            let postData = {};
            if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }
            postData.name = $("#shrtype1").val();
            $.ajax({
                url: '/sales/Port!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    that.PortList = res.info.rows
                    that.totalPage = res.info.pageCount
                    if (that.PortList == null || that.PortList == undefined) {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
    }
}
</script>
